import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaDialog, WeaLocaleProvider, WeaSelect, WeaTools } from 'ecCom';
import { Button, Row } from 'antd';
import './index.less';
import FileUploadSetDialog from './FileUploadSetDialog';

const { types } = WeaTools;
const getLabel = WeaLocaleProvider.getLabel;

@inject('edcFormDesignerStore', 'edcAppDesignerStore')
@observer
export default class Relation extends React.Component {
    constructor(props) {
        super(props);

        this.store = props.edcFormDesignerStore;
        this.appDesignStore = props.edcAppDesignerStore;

        const { formTitle } = this.store;
        const { appName } = this.appDesignStore;

        this.state = {
            createVisible: false,
            appName,
            moduleName: formTitle,
            fileVisible: false,
        };

        this.store.initNames({
            appName: `[数据中心]${appName}`,
            modeName: `[数据中心]${formTitle}`,
        });
    }

    componentDidMount() {
        const { appName, modeName, form, getJoinCube } = this.store;
        const condition = this.getCondition({ appName, modeName });

        form.setCondition(condition);
        getJoinCube();
    }

    getCondition = obj => [{
        items: [
            {
                conditionType: types.INPUT,
                label: getLabel('381923', '应用名称'),
                domkey: ['appName'],
                rules: 'required',
                viewAttr: 3,
                otherParams: { placeholder: getLabel('383262', '请输入应用名称') },
                value: obj.appName,
                length: 30,
                labelcol: 4,
                fieldcol: 20,
                colSpan: 1,
            },
            {
                conditionType: types.INPUT,
                label: getLabel('28485', '模块名称'),
                domkey: ['modeName'],
                rules: 'required',
                viewAttr: 3,
                otherParams: { placeholder: getLabel('383260', '请输入模块名称') },
                value: obj.modeName,
                length: 30,
                labelcol: 4,
                fieldcol: 20,
                colSpan: 1,
            },
        ],
    }]

    fileUploadOnclick = () => {
        const { fileUploadStore, formId, modeId } = this.store;
        this.setState({ fileVisible: true }, () => {
            fileUploadStore.setModeid(modeId);
            fileUploadStore.setFormid(formId);
            fileUploadStore.initFileUploadSet();
            fileUploadStore.getUploadFieldInfo();
        });
    }

    onCreateClick = () => {
        this.setState({ createVisible: true });

        setTimeout(() => {
            const ele = document.querySelector('.ef-relation-create-dialog');
            const content = ele.querySelector('.wea-content');

            content.style.display = 'block';
        });
    }

    onFileCancel = () => this.setState({ fileVisible: false });
    onSaveMode = () => {
        const { onSaveMode, form, initNames } = this.store;

        form.validateForm().then((f) => {
            if (!f.isValid) {
                f.showErrors(true);
                // 防止state改变 error重新渲染
                setTimeout(() => f.showErrors(false), 2000);
                this.setState({ date: new Date() });
                return;
            }
            const data = form.getFormParams();
            
            initNames(data);
            onSaveMode(() => {
                this.setState({ createVisible: false });
            });
        });
    }

    render() {
        const { joinCube, onFormmodeIdChange, readonly, form, fileUploadStore, createLoading } = this.store;
        const { createVisible, fileVisible } = this.state;
        const { isChangeFlag, categorytype, seccategory, selectcategory } = fileUploadStore;
        const hasCube = () => joinCube.options.length > 0;
        const formmodeId = String(joinCube.formmodeId || '');

        return (
            <div style={{ padding: '20px' }}>
                <div className="wea-ef-relation">
                    <span className="wea-f12 ef-joincube">
                        {/* <i className='anticon anticon-link'/> */}
                        <span>{getLabel('511779', '关联建模模块：')}</span>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@jxqwhy`}
                          value={formmodeId}
                          options={joinCube.options}
                          onChange={v => onFormmodeIdChange(v)}
                          showSearch
                          optionFilterProp="children"
                          style={{ width: 170 }}
                          placeholder={!hasCube() ? getLabel('511780', '表单未创建模块') : getLabel('511781', '未关联')}
                          allowClear={true}
                          disabled={readonly || joinCube.options.length < 1}
                        />
                    </span>
                    {
                        !hasCube() &&
                        <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@typ2ce`}>
                            <div className="create-relation">
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hiopun`}
                                  type="primary"
                                  onClick={this.onCreateClick}

                                >
                                    {getLabel('503895', '立即创建')}
                                </Button>
                            </div>
                            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@aagz7b`}
                              iconBgcolor="#96358a"
                              icon="icon-coms-ModelingEngine"
                              title={getLabel('127492', '添加模块')}
                              hasScroll={true}
                              visible={createVisible}
                              onCancel={() => this.setState({ createVisible: false })}
                              style={{ height: '140px', width: '380px' }}
                              buttons={[
                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5hplej@`} type="primary" loading={createLoading} onClick={this.onSaveMode}>{getLabel('125', '创建')}</Button>,
                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@noyew3@`} type="primary" onClick={() => this.setState({ createVisible: false })} >{getLabel('31129', '取消')}</Button>,
                                ]}
                            >
                                <div className="ef-relation-create-dialog">
                                    {form.render({ needTigger: false, col: 1 })}
                                </div>
                            </WeaDialog>
                        </React.Fragment>
                    }
                </div>
                {
                    formmodeId &&
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@fv5gfl`} className="ef-relation-file-upload">
                        <label>{getLabel('22210', '附件上传目录')}：</label>
                        <span
                          className="icon-coms-Flow-setting  icon-coms-Flow-setting-fileipload"
                          onClick={this.fileUploadOnclick}
                        />
                        {
                            fileVisible &&
                            <FileUploadSetDialog ecId={`${this && this.props && this.props.ecId || ''}_FileUploadSetDialog@d3iitz`}
                              categoryInfo={joinCube.categoryInfo}
                              store={this.store}
                              onFileCancel={this.onFileCancel}
                            />
                        }
                        {(categorytype && categorytype.value == 0) ? (seccategory && seccategory.value && seccategory.value !== '0' || isChangeFlag == '1') && <span className="icon-coms-Selected icon-coms-Flow-Selected-fileipload" />
                            :
                            (selectcategory && selectcategory.value || isChangeFlag == '1') && <span className="icon-coms-Selected icon-coms-Flow-Selected-fileipload" />
                        }
                    </Row>
                }
            </div>
        );
    }
}
